<template>
  <div id="app">
    <!-- <div class="welcome" v-if="ishow">
      <input class="welcome-txt" type="text" :value="txt" />
      <div class="notouch"></div>
    </div>-->
    <!-- 选择框 -->
    <div class="menu">
      <SaoMenu :showmask="isShowMenu" ref="mask" :left="menuLeft" :top="menuTop">
        <MenuBtn slot="btn" id="1" system="1">
          <MenuItem id="1" to="/index" name="首页"></MenuItem>
          <MenuItem id="2" to="/user" name="个人信息"></MenuItem>
          <MenuItem id="3" to="/fold" name="折叠面板"></MenuItem>
          <MenuItem id="4" to="/carousel" name="轮播图"></MenuItem>
          <MenuItem id="5" to="/animate" name="内容页展示"></MenuItem>
          <MenuItem id="6" to="/ranking" name="排行列表"></MenuItem>
        </MenuBtn>
        <MenuBtn slot="btn" id="2" system="2">
          <MenuItem id="1" to="/input" name="输入框"></MenuItem>
          <MenuItem id="2" to="/musicbox" name="音乐盒子"></MenuItem>
        </MenuBtn>
        <MenuBtn slot="btn" id="3" system="3">
          <MenuItem id="1" to="/a" name="test1"></MenuItem>
        </MenuBtn>
        <MenuBtn slot="btn" id="4" system="4">
          <MenuItem id="1" to="/share" name="安利墙"></MenuItem>
        </MenuBtn>
        <MenuBtn slot="btn" id="5" system="5"></MenuBtn>
      </SaoMenu>
    </div>
    <div class="flexbox">
      <transition name="transitionRouter" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import $ from "jquery";
import iconItem from "./assets/SAOIcon/symbol/info_normal.png";
// import img5 from "../../../public/SAOIcon/img/share5.jpg"
import alertBox from "./components/saoc/alertBox/alertbox";
export default {
  name: "app",
  data() {
    return {
      menuSonlist: [{ id: "1", name: "123", link: "/a", imgURl: "112313123" }],
      icon: iconItem,
      isShowMenu: false,
      musicList: [
        {
          url:
            "https://96.f.1ting.com/5cc5555f/947fc092c7b4ba91e5b1820a4ad9a827/zzzzzmp3/2013aJan/23D/23ostsao/25.mp3",
          name: "Yui",
          actor: "未知"
        },
        {
          url:
            "//96.f.1ting.com/5cbedeaf/2ac3ae4cb2f47eabdb8744c0d52f5c8e/zzzzzmp3/2013eMay/06D/06sao/17.mp3",
          name: "Yui",
          actor: "未知"
        },
        {
          url:
            "//96.f.1ting.com/5cbedeaf/2ac3ae4cb2f47eabdb8744c0d52f5c8e/zzzzzmp3/2013eMay/06D/06sao/17.mp3",
          name: "Yui",
          actor: "未知1"
        }
      ],
      txt: "",
      menuLeft: "0px",
      menuTop: "0px"
    };
  },
  created() {},
  mounted: function() {
    let _this=this;
    // this.welcome();
    // if(this.$router.history.current.path != '/'){
    //   this.ishow=false;
    // }
    //Dom更新之后进行相关数据绑定！
    // this.$nextTick(() => {
    //   // DOM 现在更新了
    //   // `this` 绑定到当前实例
    //   this.ishow = this.$store.getters.isShow;
    //   console.log(this.ishow);
    // });
    //使用定时器进行数据延迟修改！
    // let _this = this;
    // let timer = setTimeout(function() {
    //   _this.ishow = _this.$store.getters.isShow;
    //   console.log(_this.ishow);
    //   clearTimeout(timer);
    // }, 100);
    //初始高度
    $("#app").css("height", $(window).height());

    //按键code
    $(document).keydown(function(event) {
      if (event.keyCode == 122) {
        location.reload();
      }
    });

    //手机检测
    var u = navigator.userAgent;
    if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
      //安卓手机
    } else if (u.indexOf("iPhone") > -1) {
      //苹果手机
    } else if (u.indexOf("Windows Phone") > -1) {
      //winphone手机
    }

    //界面自动缩放
    window.onresize = function() {
      // $(window).width();
      $("#app").css("height", $(window).height());
    };
    console.log(
      `%c saoui %c 1.0.0 %c`,
      "background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff",
      "background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff",
      "background:transparent"
    );
    //鼠标右键调出菜单
    window.oncontextmenu = function(e) {
      e.preventDefault();
      _this.menuLeft = e.clientX + "px";
      _this.menuTop = e.clientY + "px";
      _this.showMenu();
    };

    window.onbeforeunload = function(e) {
      console.log(e);
    };
  },
  components: {
    // HelloWorld
    AlertBox: alertBox
  },
  methods: {
    showMenu: function() {
      //调出选择框
      if (this.$refs.mask.isShow == true) {
        //内部调用开关方法
        this.$refs.mask.noShow();
      } else {
        this.$refs.mask.showMask();
      }
    },
    welcome: function() {//提示字样(暂时取消)
      let txt = "Welcome to SAO World!";
      let txtLength = txt.length;
      let txtArrary = txt.split("");
      let showTxt = "";
      let _this = this;
      console.log(txtLength);
      for (let i = 0; i < txtLength; i++) {
        let timer = setTimeout(function() {
          showTxt += txtArrary[i];
          _this.txt = showTxt;
          clearTimeout(timer);
        }, 100 * i);
      }
      let timer = setTimeout(function() {
        _this.$store.dispatch("noShow");
        _this.ishow = _this.$store.getters.isShow;
        clearTimeout(timer);
      }, 5000);
    },
    showMesbox: function() {
      this.$store.dispatch("mesShow");
      console.log(this.$store.getters.isShow);
    }
  }
};
</script>

<style>
.test {
  position: absolute;
  top: 0px;
  left: 0px;
}
#app {
  position: relative;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
  /* height: 900px;
  min-height: 900px; */
  /* background-color: aliceblue; */
  background-image: url("../examples/assets/img/bg1.jpg");
  background-attachment: fixed;
  background-size: cover;
  overflow: auto;
}
#app::-webkit-scrollbar {
  display: none;
}
@font-face {
  font-family: "saoUI";
  src: url("./SAOUIRegular.otf");
}
* {
  font-family: saoUI;
  margin: 0px;
  user-select: none;
}
body,
html {
  overflow: hidden;
}
html::-webkit-scrollbar {
  display: block;
}
html::-webkit-scrollbar-thumb {
  display: block;
}
.welcome {
  width: 100%;
  height: auto;
  color: white;
  font-size: 30px;
  padding-top: 100px;
  position: fixed;
  z-index: 1;
}
.welcome-txt {
  font-size: 30px;
  color: white;
  background-color: rgba(255, 255, 255, 0);
  border: 0px;
  outline: none;
  padding-left: 5px;
  text-align: center;
}
.notouch {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: white; */
}
.userinfo {
  width: 100%;
  height: 100px;
  position: fixed;
  /* background-color: white; */
  z-index: 100;
}

.flexbox {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 1200px;
  height: 100%;
  justify-content: center;
  align-items: center;
  overflow: auto;
}
.flexbox::-webkit-scrollbar {
  display: none;
}
.transitionRouter-enter-active,
.transitionRouter-leave-active {
  transition: all 0.4s;
}
.transitionRouter-enter,
.transitionRouter-leave {
  transform: translate3d(-100%, 0, 0);
}
</stylel>
